<template>
	<div>
		<!-- 搜索 -->
		<el-row :gutter="10" style="margin-bottom: 10px">
			<el-col :span="4">
				<el-input v-model="product.name" placeholder="名称搜索" clearable></el-input>
			</el-col>
			<el-col :span="4">
				<el-input v-model="product.shop" placeholder="店铺名称搜索" clearable></el-input>
			</el-col>
			<el-col :span="4">
				<el-input v-model="product.startPrice" placeholder="开始价格搜索" clearable></el-input>
			</el-col>
			<el-col :span="4">
				<el-input v-model="product.endPrice" placeholder="结束价格搜索" clearable></el-input>
			</el-col>

			<el-col :span="4">
				<el-button type="warning" @click="bindSearch">搜索产品</el-button>
			</el-col>
		</el-row>

		<el-button-group>
			<el-button type="success" size="small" @click="bindAddGood">添加</el-button>
			<el-button type="warning" size="small" @click="bindRefresh">刷新</el-button>
			<el-button type="primary" size="small" @click="bindBatchDelete">批量删除</el-button>
			<el-button type="success" size="small" @click="bindExcelExport">导出excel</el-button>
		</el-button-group>

		<!-- 表格 -->
		<el-table :data="goodsList" style="width: 100%" @selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column label="序列号" prop="id" width="100"> </el-table-column>
			<el-table-column label="名称" prop="product"></el-table-column>
			<el-table-column label="店铺名称" prop="shop"></el-table-column>
			<el-table-column label="图片">
				<template #default="scope">
					<el-image :src="filterUrl(scope.row.picture)" style="width: 100px; height: 100px"></el-image>
				</template>
			</el-table-column>
			<el-table-column label="价格" prop="price"></el-table-column>
			<el-table-column label="类型" prop="categoryname"></el-table-column>
			<el-table-column label="操作">
				<template #default="scope">
					<el-button type="success" size="small" @click="bindEdit(scope.row)">编辑</el-button>

					<el-popconfirm title="确认要删除此记录吗?" @confirm="bindDelete(scope.row.id)">
						<template #reference>
							<el-button type="primary" size="small" v-permession="'DeleteProduct'">删除</el-button>
						</template>
					</el-popconfirm>
				</template>
			</el-table-column>
		</el-table>
		<!-- 分页 -->
		<el-pagination
			background
			layout="total,sizes,prev, pager, next, jumper"
			:total="total"
			:default-page-size="5"
			:page-sizes="[5, 10, 20, 30]"
			@size-change="bindSizeChange"
			@current-change="bindCurrentChange"
		></el-pagination>

		<!-- 弹出对话框 -->
		<el-dialog :title="type === 'ADD' ? '添加产品' : '编辑产品'" v-model="dialogGoodsFormVisible" width="40%">
			<GoodsDialog v-if="dialogGoodsFormVisible" @close="bindCloseDialog" :goods="goods" :type="type"></GoodsDialog>
		</el-dialog>
	</div>
</template>

<script>
import GoodsDialog from '@/components/GoodsDialog.vue'
import { ElMessage } from 'element-plus'
import { excelExport2 } from '@/utils/xlsxutil.ts'
// import { baseURL } from '@/api/request'
import { api } from '@/api/index'
const { RequestProductList, RequestProductDeleteById, RequestProductBatchDelete } = api

export default {
	components: {
		GoodsDialog
	},
	data() {
		return {
			goodsList: [],
			dialogGoodsFormVisible: false,
			total: 0, // 总记录条数
			pageSize: 5, // 每页记录条数
			pageNo: 1, // 当前页号
			type: 'ADD', // EDIT 编辑 ADD 添加
			goods: null,
			product: {
				name: '', // 搜索产品名称
				price: '', //搜索产品价格
				shop: '', // 店铺名称
				startPrice: '', //开始价格
				endPrice: '' //结束价格
			},
			ids: '' // 删除商品id 集合
		}
	},
	created() {
		this.getShopList()
	},
	methods: {
		filterUrl(url) {
			return url?.indexOf('http') === -1 ? import.meta.env.VITE_APP_BASE + url : url
		},
		/**
		 * 产品列表
		 */
		async getShopList() {
			const pagination = {
				pageNo: this.pageNo,
				pageSize: this.pageSize,
				product: this.product.name,
				shop: this.product.shop,
				startPrice: this.product.startPrice,
				endPrice: this.product.endPrice
			}
			const data = await RequestProductList(pagination)
			const { resultCode, resultInfo } = data
			if (resultCode === 1) {
				this.total = resultInfo.total // 总记录条数
				this.goodsList = resultInfo.list
			}
		},
		/**
		 * 编辑产品
		 */
		bindEdit(row) {
			this.goods = row
			this.type = 'EDIT'
			this.dialogGoodsFormVisible = true
		},
		/**
		 * 删除商品
		 */
		async bindDelete(id) {
			const data = await RequestProductDeleteById(id)
			const { resultCode } = data
			if (resultCode === 1) {
				ElMessage({
					type: 'success',
					message: '删除成功!'
				})
				this.getShopList()
			}
		},
		/**
		 * 添加-弹出添加表单对话框
		 */
		bindAddGood() {
			this.type = 'ADD'
			this.dialogGoodsFormVisible = true
		},
		/**
		 * 刷新
		 */
		bindRefresh() {
			this.product = {} // 重置搜索数据
			this.getShopList()
		},
		bindCloseDialog() {
			this.dialogGoodsFormVisible = false
			this.getShopList()
		},
		/**
		 * 页大小改变事件
		 */
		bindSizeChange(value) {
			this.pageSize = value
			this.getShopList()
		},
		/**
		 * 页号改变事件
		 */
		bindCurrentChange(value) {
			this.pageNo = value
			this.getShopList()
		},
		/**
		 * 搜索产品
		 */
		bindSearch() {
			this.pageNo = 1
			this.getShopList()
		},
		/**
		 * 多选
		 */
		handleSelectionChange(value) {
			// console.log('value ', value) // [{id:10,name:''}] => [10,12,34] => '10,12,34'
			const list = value.map(item => item.id)
			const ids = list.join(',')
			this.ids = ids
		},
		/**
		 * 批量删除
		 */
		async bindBatchDelete() {
			if (this.ids?.split(',').length <= 0) {
				ElMessage({
					type: 'info',
					message: '请选择删除产品'
				})
				return
			}
			const data = await RequestProductBatchDelete(this.ids)
			const { resultCode } = data
			if (resultCode === 1) {
				ElMessage({
					type: 'success',
					message: '批量删除成功'
				})
				this.getShopList()
			}
		},
		/**
		 * 导出excel
		 */
		bindExcelExport() {
			excelExport2(
				this.goodsList,
				{
					id: '序列号',
					product: '产品名称',
					shop: '店铺名称',
					picture: '图片',
					price: '价格',
					oldprice: '原价',
					categoryname: '类型名称'
				},
				'产品列表'
			)
		}
	}
}
</script>

<style lang="scss" scoped></style>
